<template>
    <div class="mod-demo-echarts">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <div id="J_chartPieBox" class="chart-box" style="text-align: center;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import echarts from 'echarts'
  export default {
    data() {
      return {
        chartPie: null,
        chartPieOptions: []
      }
    },
    mounted() {
      this.initChartPie()
    },
    activated() {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartPie) {
        this.chartPie.resize()
      }
    },
    created() {
      this.getPetTypeChartPie()
    },
    methods: {
      // 查询最近2年的已结案分布图
      getPetTypeChartPie() {
        this.$http.get('/pet/petsend/getPetTypeChartPie').then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.chartPieOptions = res.data
          this.initChartPie()
        }).catch(() => { })
      },
      // 饼状图
      initChartPie() {
        var option = {
          title: {
            text: '送养宠物种类分布图',
            subtext: '饼图数据',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
  
          series: [
            {
              name: '宠物种类',
              type: 'pie',
              radius: '70%',
              data: this.chartPieOptions,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
  .mod-demo-echarts {
    >.el-alert {
      margin-bottom: 10px;
    }
  
    >.el-row {
      margin-top: -10px;
      margin-bottom: -10px;
  
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
  
    .chart-box {
      min-height: 400px;
    }
  }
  </style>
  